<template>
	<view class="content">
		<!-- <nav-bar></nav-bar> -->
		<view>
			<view class="content-warp">

				<view class="content-warp-background">
					<image style="width: 100%;height: 100%;position: relative;" :src="currentBackgroundImage">
					</image>
					<view class="content-warp-content">
						<view v-for="(item,index) in imageList" @click="imageContent(index)">
							<image class="imageList" :src="item.image"></image>
						</view>
					</view>
				</view>
				<view class="uni_bot">
					<view class="uni_bot_warp">阿布扎比（ABU ZHABI）</view>
					<view class="uni_bot_cot">地址：北京市丰台区六里桥街道西四环南路20号</view>
					<view class="uni_bot_dispaly">
						<view class='uni_bot_text'>古老的历史</view>
						<view class='uni_bot_text'>非物质文化遗产</view>
						<view class='uni_bot_text'>自然风光</view>
					</view>
					<view class="tabs">
						<view @click="currentTab = 0" :class="{active: currentTab === 0}" class="tabs-back">
							<image class='iconFont' src="../../static/images/jianjie.png"></image>
							<view>简介</view>
						</view>
						<view @click="currentTab = 1" :class="{active: currentTab === 1}" class="tabs-back">
							<image class='iconFont' src="../../static/images/room.png"></image>
							<view>预约</view>
						</view>
						<view @click="currentTab = 2" :class="{active: currentTab === 2}" class="tabs-back">
							<image class='iconFont' src="../../static/images/love.png"></image>
							<view>周边</view>
						</view>
						<view @click="currentTab = 3" :class="{active: currentTab === 3}" class="tabs-back">
							<image class='iconFont' src="../../static/images/pj.png"></image>
							<view>评价</view>
						</view>
					</view>
					
						
						<view v-if="currentTab === 0">
							<view>123</view>
							<view>123</view>
							<view>123</view>
							<view>123</view>
							<view>123</view>
							<view>123</view>
						</view>
						<view v-if="currentTab === 1">
							<view>456</view>
						</view>
						<view v-if="currentTab === 2">
							<view>789</view>
						</view>
						<view v-if="currentTab === 3">
							<view>101112</view>
						</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '../../component/nav-bar.vue';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				currentTab: 0, // 当前选中的选项卡索引  
				currentBackgroundImage: '../../static/logo.png', // 初始背景图片 
				imageList: [{
						image: '../../static/logo.png'
					},
					{
						image: '../../static/images/ban1.png'
					},
					{
						image: '../../static/logo.png'
					},
				]
			}
		},
		methods: {
			imageContent(index) {
				console.log(index);
				this.currentBackgroundImage = this.imageList[index].image;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 视口高度 */
	}

	.tabs {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		padding: 10px;
	}

	.tabs button {
		padding: 10px 20px;
		border: none;
		background-color: #f0f0f0;
	}
	.tabs-back{
		
		width: 140rpx;
		height: 70rpx;
		border-radius: 20rpx;
		line-height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.active {
		// background-color: #009688;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		/* UniApp 的主题色 */
		color: #4B0C46;
		 transition-duration: 0.8s;
	}

	.tab-content {

		/* 占据剩余空间 */

	}

	.content-warp {
		width: 100%;
		height: 600rpx;

		&-background {
			width: 100%;
			height: 700rpx;

		}

		&-content {
			position: absolute;
			top: 15%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 500rpx;
			height: 200rpx;
			margin: 300rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #ffffff;
			opacity: 0.7;
			border-radius: 10rpx;
		}

		.imageList {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.uni_bot {
		position: absolute;
		// top: 60%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		margin-top: -50rpx;
		width: 100%;
		// border: 1rpx solid red;
		text-align: center;

		background-color: #ffffff;
		border-top-left-radius: 15px;
		/* 左上角 */
		border-top-right-radius: 15px;

		/* 右上角 */
		&_warp {
			font-size: 40rpx;
			font-weight: 800;
			margin-top: 30rpx;
		}

		&_cot {
			margin-top: 20rpx;
		}

		&_dispaly {
			display: flex;


		}

		&_text {
			margin-top: 20rpx;
			margin-left: 20rpx;
			background-color: #4B0C46;
			padding: 10rpx;
			color: #ffffff;
			border-radius: 5rpx;
			font-size: 20rpx;
		}
	}
	.iconFont{
		width: 50rpx;
		height: 50rpx;
	}
</style>